<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>欢迎登陆</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta content="" name="description" />
    <meta content="dlq" name="author" />
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" />
    <link rel="shortcut icon" href="favicon.ico" />
    <script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
    <style>
        body {
            background: url(./app/00pageframework/img/tp1.jpg) no-repeat;
            background-size: cover;
        }

        .data-form {
            background-color: white;
            filter: alpha(Opacity=90);
            -moz-opacity: 0.9;
            opacity: 0.9;
        }

        .mt200 {
            margin-top: 200px;
        }

        .pdlr0 {
            padding-left: 0px;
            padding-right: 0px;
        }

        .pdlr15 {
            padding-right: 15px !important;
            padding-left: 15px !important;
        }
    </style>
</head>

<body>
    <div class="container-fluid">
        <div class="row mt200 main">
            <div class="col-xs-4"></div>
            <div class="col-xs-4 row data-form">
                <div class="col-xs-12 text-center">
                    <h4 class="step-1 title-1" style="display: inline-block; margin-bottom: 0px; margin-top: 20px;"></h4>
                    <h6 class="step-1 col-xs-offset-4" style="margin-bottom: 15px;">(已有账号请绑定，没有请注册)</h6>
                    <h2 class="step-2 step-3" style="display: inline-block;">注册</h2>
                </div>
                <div class="col-xs-12">
                    <form class="form-horizontal">
                        <div class="form-group step-1">
                            <label for="name" class="col-sm-2 control-label pdlr0">机构编号</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="name" placeholder="机构编号">
                            </div>
                        </div>
                        <div class="form-group step-3">
                            <label for="username" class="col-sm-2 control-label pdlr0">所属区域</label>
                            <div class="col-sm-9">
                                <select class="form-control" id="area_id" placeholder="所属区域">
                                    <!-- <option value=""></option> -->
                                </select>
                                <!-- <input type="text" class="form-control" id="area_id" placeholder="所属区域"> -->
                            </div>
                        </div>
                        <div class="form-group step-3">
                            <label for="username" class="col-sm-2 control-label pdlr0">机构名称</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="username" placeholder="机构名称">
                            </div>
                        </div>
                        <div class="form-group step-1 step-3">
                            <label for="password" class="col-sm-2 control-label pdlr0">密码</label>
                            <div class="col-sm-9">
                                <input type="password" class="form-control" id="password" placeholder="密码(6-36位)">
                            </div>
                        </div>
                        <div class="form-group step-3">
                            <label for="password_2" class="col-sm-2 control-label pdlr0">确认密码</label>
                            <div class="col-sm-9">
                                <input type="password" class="form-control" id="password_2" placeholder="再次输入密码">
                            </div>
                        </div>
                        <div class="form-group step-2">
                            <label for="mobile" class="col-sm-2 control-label pdlr0">手机号</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="mobile" placeholder="手机号">
                            </div>
                        </div>
                        <div class="form-group step-2">
                            <label for="code_input" class="col-sm-2 control-label pdlr0">验证码</label>
                            <div class="col-sm-9 input-group pdlr15">
                                <input type="text" class="form-control" id="code_input" placeholder="验证码">
                                <span type="button" id="v_container" class="input-group-addon" style="width: 150px; padding: 0px; margin: 0px; border-width: 0px;"></span>
                            </div>
                        </div>
                        <div class="form-group step-2">
                            <label for="verification" class="col-sm-2 control-label pdlr0">短信码</label>
                            <div class="col-sm-9 input-group pdlr15">
                                <input type="text" class="form-control" id="verification" placeholder="短信验证码">
                                <span type="button" id="my_button" class="input-group-addon btn get-verification">
                                    获取短信验证码
                                </span>
                            </div>
                        </div>
                        <div class="form-group step-2">
                            <div class="col-sm-offset-2 col-sm-9 text-right">
                                <button type="button" class="btn btn-warning back-bind">返回</button>
                                <button type="button" class="btn btn-success next-step">下一步</button>
                            </div>
                        </div>
                        <div class="form-group step-3">
                            <div class="col-sm-offset-2 col-sm-9 text-right">
                                <button type="button" class="btn btn-success sure-register">注册</button>
                            </div>
                        </div>
                        <div class="form-group step-1">
                            <div class="col-sm-offset-2 col-sm-9 text-right">
                                <button type="button" class="btn btn-link btn-register">注册</button>
                                <button type="button" class="btn btn-success btn-bind">绑定</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-xs-4"></div>
            </div>
        </div>
    </div>
    <!-- 验证码 -->
    <script>
        !(function (window, document) {
            var size = 4;//设置验证码长度
            function GVerify(options) { //创建一个图形验证码对象，接收options对象为参数
                this.options = { //默认options参数值
                    id: "", //容器Id
                    canvasId: "verifyCanvas", //canvas的ID
                    width: "100", //默认canvas宽度
                    height: "30", //默认canvas高度
                    type: "blend", //图形验证码默认类型blend:数字字母混合类型、number:纯数字、letter:纯字母
                    code: "",
                }
                if (Object.prototype.toString.call(options) == "[object Object]") {//判断传入参数类型
                    for (var i in options) { //根据传入的参数，修改默认参数值
                        this.options[i] = options[i];
                    }
                } else {
                    this.options.id = options;
                }

                this.options.numArr = "0,1,2,3,4,5,6,7,8,9".split(",");
                this.options.letterArr = getAllLetter();

                this._init();
                this.refresh();
            }

            GVerify.prototype = {
                /**版本号**/
                version: '1.0.0',

                /**初始化方法**/
                _init: function () {
                    var con = document.getElementById(this.options.id);
                    var canvas = document.createElement("canvas");
                    // this.options.width = con.offsetWidth > 0 ? con.offsetWidth : "100";
                    // this.options.height = con.offsetHeight > 0 ? con.offsetHeight : "30";
                    this.options.width = con.offsetWidth > 0 ? con.offsetWidth : "auto";
                    this.options.height = con.offsetHeight > 0 ? con.offsetHeight : "auto";
                    canvas.id = this.options.canvasId;
                    canvas.width = this.options.width;
                    canvas.height = this.options.height;
                    canvas.style.cursor = "pointer";
                    canvas.innerHTML = "您的浏览器版本不支持canvas";
                    con.appendChild(canvas);
                    var parent = this;
                    canvas.onclick = function () {
                        parent.refresh();
                    }
                },

                /**生成验证码**/
                refresh: function () {
                    this.options.code = "";
                    var canvas = document.getElementById(this.options.canvasId);
                    if (canvas.getContext) {
                        var ctx = canvas.getContext('2d');
                    } else {
                        return;
                    }

                    ctx.textBaseline = "middle";

                    ctx.fillStyle = randomColor(180, 240);
                    ctx.fillRect(0, 0, this.options.width, this.options.height);

                    if (this.options.type == "blend") { //判断验证码类型
                        var txtArr = this.options.numArr.concat(this.options.letterArr);
                    } else if (this.options.type == "number") {
                        var txtArr = this.options.numArr;
                    } else {
                        var txtArr = this.options.letterArr;
                    }

                    for (var i = 1; i <= size; i++) {
                        var txt = txtArr[randomNum(0, txtArr.length)];
                        this.options.code += txt;
                        ctx.font = randomNum(this.options.height / 2, this.options.height) + 'px SimHei'; //随机生成字体大小
                        ctx.fillStyle = randomColor(50, 160); //随机生成字体颜色        
                        ctx.shadowOffsetX = randomNum(-3, 3);
                        ctx.shadowOffsetY = randomNum(-3, 3);
                        ctx.shadowBlur = randomNum(-3, 3);
                        ctx.shadowColor = "rgba(0, 0, 0, 0.3)";
                        var x = this.options.width / (size + 1) * i;
                        var y = this.options.height / 2;
                        var deg = randomNum(-30, 30);
                        /**设置旋转角度和坐标原点**/
                        ctx.translate(x, y);
                        ctx.rotate(deg * Math.PI / 180);
                        ctx.fillText(txt, 0, 0);
                        /**恢复旋转角度和坐标原点**/
                        ctx.rotate(-deg * Math.PI / 180);
                        ctx.translate(-x, -y);
                    }
                    /**绘制干扰线**/
                    for (var i = 0; i < 4; i++) {
                        ctx.strokeStyle = randomColor(40, 180);
                        ctx.beginPath();
                        ctx.moveTo(randomNum(0, this.options.width), randomNum(0, this.options.height));
                        ctx.lineTo(randomNum(0, this.options.width), randomNum(0, this.options.height));
                        ctx.stroke();
                    }
                    /**绘制干扰点**/
                    for (var i = 0; i < this.options.width / 4; i++) {
                        ctx.fillStyle = randomColor(0, 255);
                        ctx.beginPath();
                        ctx.arc(randomNum(0, this.options.width), randomNum(0, this.options.height), 1, 0, 2 * Math.PI);
                        ctx.fill();
                    }
                },

                /**验证验证码**/
                validate: function (code) {
                    var code = code.toLowerCase();
                    var v_code = this.options.code.toLowerCase();
                    if (code == v_code) {
                        return true;
                    } else {
                        this.refresh();
                        return false;
                    }
                }
            }
            /**生成字母数组**/
            function getAllLetter() {
                var letterStr = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z";
                return letterStr.split(",");
            }
            /**生成一个随机数**/
            function randomNum(min, max) {
                return Math.floor(Math.random() * (max - min) + min);
            }
            /**生成一个随机色**/
            function randomColor(min, max) {
                var r = randomNum(min, max);
                var g = randomNum(min, max);
                var b = randomNum(min, max);
                return "rgb(" + r + "," + g + "," + b + ")";
            }
            window.GVerify = GVerify;
        })(window, document);
    </script>
    <script type="text/javascript">
        var msgKey = "";
        var rid = getQueryString('rid');
        var cid = getQueryString('cid');
        var verifyCode = new GVerify("v_container");
        var isGettingVerification = false;
        var time = 60;

        if (!rid || !cid) {
            $('.main').addClass('text-center');
            $('.main').html(`<h2>缺少参数【cid】|【rid】|【area_id】</h2>`);
            $('body').css('background', 'white')
        } else {
            let para = {
                rid: rid,
                cid: cid
            }
            $.ajax({
                url: "/api/uc/sc/office/findOfficeByCid",
                type: 'POST',
                data: JSON.stringify(para),
                contentType: 'application/json;charset=utf-8',
                dataType: 'json',
                success: function (data, textStatus, jqXHR) {
                    if (data.errcode === 0) {
                        $('.title-1').html(`<strong>【${data.data.name}】邀请您成为其分销商</strong>`);
                    } else {
                        alert(data.errmsg);
                    }
                },
            });
            $.ajax({
                'url': "/api/us/sc/city/citylist",
                'type': 'get',
                'dataType': 'json',
                'success': function (data, textStatus, jqXHR) {
                    if (data.errcode === 0) {
                        var html = '';
                        for (let index = 0; index < data.data.length; index++) {
                            const element = data.data[index];
                            html += `<option value="${element.ID}">${element.NAME}</option>`;
                        }
                        $('#area_id').html(html);
                    } else {
                        alert(data.errmsg);
                    }
                },
            });
        }

        function cunInit() {
            msgKey = "";
            $('#verifyCanvas').click();
            isGettingVerification = false;
            time = 60;
            $('#mobile').val('');
            $('#username').val('');
            $('#code_input').val('');
            $('#verification').val('');
            $('#mobile').removeAttr('disabled');
        }
        function settime() {
            $('.get-verification').html(`&nbsp;&nbsp;&nbsp;&nbsp;${time}&nbsp;&nbsp;&nbsp;&nbsp;`)
            if (time > 0) {
                time--;
                setTimeout(() => {
                    settime();
                }, 1000);
            } else {
                $('.get-verification').html('重新获取')
                $('.get-verification').removeAttr('disabled')
                isGettingVerification = false;
                time = 60;
            }
        }
        $(function () {
            $('.step-2').hide();
            $('.step-3').hide();
            $('.step-1').show();
            $(".btn-register").bind('click', function () {
                $('.step-1').hide();
                $('.step-3').hide();
                $('.step-2').show();
            });
            $(".back-bind").bind('click', function () {
                $('.step-2').hide();
                $('.step-3').hide();
                $('.step-1').show();
                cunInit();
            });
            //下一步
            $(".next-step").bind('click', function () {
                let verification = $('#verification').val();
                if (!msgKey) {
                    alert("请先获取短信验证码")
                    return false;
                }
                if (!verification || verification.length != 6) {
                    alert("请输入正确的短信验证码")
                    return false;
                }
                let para = {
                    'code': verification,
                    'key': msgKey
                }
                $.ajax({
                    url: "/api/uc/sc/office/checkMessageCode",
                    type: 'POST',
                    data: JSON.stringify(para),
                    contentType: 'application/json;charset=utf-8',
                    dataType: 'json',
                    success: function (data, textStatus, jqXHR) {
                        if (data.errcode === 0 && data.data == '成功') {
                            $('.step-1').hide();
                            $('.step-2').hide();
                            $('.step-3').show();
                        } else {
                            alert(data.errmsg);
                        }
                    },
                });
            });
            //获取短信验证码
            $(".get-verification").bind('click', function () {
                if (isGettingVerification) {
                    return false;
                }
                let mobile = $('#mobile').val();
                var res = verifyCode.validate(document.getElementById("code_input").value);
                if (!res) {
                    alert("验证码错误");
                    $('#verifyCanvas').click();
                    return false;
                }
                if (!isMobil(mobile)) {
                    alert('请输入正确的电话号')
                    return false;
                }
                isGettingVerification = true;
                settime();
                $('.get-verification').attr('disabled', 'disabled')
                $.ajax({
                    url: "/api/uc/sc/loginService/sendMessage",
                    type: 'POST',
                    data: JSON.stringify({'mobile': mobile}),
                    contentType: 'application/json;charset=utf-8',
                    dataType: 'json',
                    success: function (data, textStatus, jqXHR) {
                        if (data.errcode === 0) {
                            msgKey = data.data;
                            $('#mobile').attr('disabled', 'disabled')
                            alert(`发送成功`);
                        } else {
                            alert(data.errmsg);
                        }
                    },
                });
            });
            //注册
            $(".sure-register").bind('click', function () {
                $('#verifyCanvas').click();
                let username = $('#username').val();
                let password = $('#password').val();
                let mobile = $('#mobile').val();
                let area_id = $('#area_id').val();
                if (!area_id) {
                    alert("请输入用户选择区域")
                    return false;
                }
                if (!username) {
                    alert("请输入用户名")
                    return false;
                }
                if (!password && password.length >= 6 && password.length <= 36) {
                    alert("请输入合理位数的密码")
                    return false;
                }
                let password_2 = $('#password_2').val();
                if (!(password == password_2)) {
                    alert('两次输入密码不一致');
                    return false;
                }
                if (!isMobil(mobile)) {
                    alert("请输入正确的电话号")
                    return false;
                }
                let para = {
                    'name': username,
                    'password': password,
                    'mobile': mobile,
                    'area_id': area_id,
                    'rid': rid,
                    'cid': cid
                }
                $.ajax({
                    url: "/api/uc/sc/office/saveOpenRegisterOffice",
                    type: 'POST',
                    data: JSON.stringify(para),
                    contentType: 'application/json;charset=utf-8',
                    dataType: 'json',
                    success: function (data, textStatus, jqXHR) {
                        if (data.errcode === 0) {
                            alert(`成功【${data.data}】`)
                            location.href = '/';
                        } else {
                            alert(data.errmsg);
                        }
                    },
                });
            });
            //登录
            $(".btn-bind").bind('click', function () {
                let name = $('#name').val();
                let password = $('#password').val();
                if (!username) {
                    alert("请输入用户名")
                    return false;
                }
                if (!password) {
                    alert("请输入密码")
                    return false;
                }
                let para = {
                    'name': name,
                    'password': password,
                    'rid': rid,
                    'cid': cid
                }
                $.ajax({
                    url: "/api/uc/sc/office/saveBindOffice",
                    type: 'post',
                    data: JSON.stringify(para),
                    contentType: 'application/json;charset=utf-8',
                    dataType: 'json',
                    success: function (data, textStatus, jqXHR) {
                        if (data.errcode === 0 && data.data == '绑定成功') {
                            alert("成功");
                        } else {
                            alert(data.errmsg);
                        }
                    },
                });
            });
        })
        /**
        * 验证手机号
        * @param {需要校验的手机号} mobile
        * @return 错误返回 false , 正确返回 true
        */
        function isMobil(mobile) {
            var patrn = /(^0{0,1}1[3|4|5|6|7|8|9][0-9]{9}$)/;
            if (!patrn.exec(mobile)) {
                return false;
            }
            return true;
        }
        /**
        * 获得 API 参数
        * @param {Object} name
        */
        function getQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return unescape(r[2]);
            }
            return null;
        }
    </script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="http://cdn.bootcss.com/jquery-validate/1.16.0/jquery.validate.min.js"></script>
    <script src="http://cdn.bootcss.com/jquery-validate/1.16.0/additional-methods.min.js"></script>
</body>

</html>